<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 500px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .btns{
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btns button{
            width: 100px;
            height: 50px;
            margin: 0 10px;
            background-color: blue;
        }

        .content{
            width: 300px;
            height: 300px;
            border: 2px solid black;
        }

        .yellow{
            background-color: yellow;
        }

        .blue{
            background-color: blue;
        }

        .red{
            background-color: red;
        }

        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="btns">
            <button id="demo1"></button>
            <button id="demo2"></button>
            <button id="demo3"></button>
            <button id="demo4"></button>
            <!-- <button onclick="btn1()"></button>
            <button onclick="btn2()"></button>
            <button onclick="btn3()"></button>
            <button onclick="btn4()"></button> -->
        </div>
        <div class="content">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

<script>
    document.getElementById('demo1').onclick = btn1;    
    document.getElementById('demo2').onclick = btn2;
    document.getElementById('demo3').onclick = btn3;
    document.getElementById('demo4').onclick = btn4;
    // function btn1(){
    //     let content = document.querySelector('.content');
    //     content.classList.add('yellow');
    //     content.classList.remove('blue', 'red', 'green');
    // }

    // function btn2(){
    //     let content = document.querySelector('.content');
    //     content.classList.add('blue');
    //     content.classList.remove('yellow', 'red', 'green');
    // }

    // function btn3(){
    //     let content = document.querySelector('.content');
    //     content.classList.add('red');
    //     content.classList.remove('blue', 'yellow', 'green');
    // }

    // function btn4(){
    //     let content = document.querySelector('.content');
    //     content.classList.add('green');
    //     content.classList.remove('blue', 'red', 'yellow');
    // }
S

    let btn1 = () => {
        let content = document.querySelector('.content');
        content.classList.add('yellow');
        content.classList.remove('blue', 'red', 'green');
    }

    let btn2 = () => {
        let content = document.querySelector('.content');
        content.classList.add('blue');
        content.classList.remove('yellow', 'red', 'green');
    }

    let btn3 = () => {
        let content = document.querySelector('.content');
        content.classList.add('red');
        content.classList.remove('blue', 'yellow', 'green');
    }

    let btn4 = () => {
        let content = document.querySelector('.content');
        content.classList.add('green');
        content.classList.remove('blue', 'red', 'yellow');
    }
</script>